

.m-design{
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	background: #f2f2f2;
	z-index: 10;
	display: none;
	@include transform(translate3d(0, 100%, 0));
  @include transition(all, .4s, ease-in-out);
  -webkit-transition-delay: 0;
  transition-delay: 0;

}

.m-design-in{
  header{
  	height: 46px;
  	text-align: center;
  	position: absolute;
  	width: 100%;
  	top: 0;
  	left: 0;
  	background-color: #eee;
  	border-bottom: 1px solid rgba(0,0,0,0.2);
  	box-shadow: 0 1px 2px rgba(0,0,0,0.1);

  	.cancel,
  	.send{
  		margin: 6px;
      padding: 4px 1em;
      margin-top: 8px;
  	}

  	.send{
  		color: $white;
  	}

    .cancel{
      color: $dark-gray;
      &:active{
        background-color: $light-gray;
        box-shadow: none;
      }
    }

  	h4{
  		color: $dark-gray;
  	}
  }

  .wrap{
  	padding: 64px 10px 10px;
  	height: 100%;
  	overflow-y: scroll;
  	//-webkit-overflow-scrolling: touch;
  	.input-box{
  		textarea{
  			box-shadow: inset 0 2px 3px 0 rgba(0,0,0,0.15);
  			padding: 10px;
  			border: 1px solid $gray;
  			width: 100%;
  			border-radius: 2px;
  			min-height: 160px;
  		}
  	}
  }

}

.m-design-open{
	.m-design{
    display: block;
	}

	.m-menu-in{
		display: none;
	}

	.m-body{
		@include transform(scale(.94));
	}
}

.m-design-open-mask{
  .m-design{
    @include transform(translate3d(0, 0, 0));
  }
}
